<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comm.js DOC</title>
<link type="text/css" rel="stylesheet" href="http://misc.tg.com.cn/ui/css/core.css">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script src="http://misc.tg.com.cn/ui/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://misc.tg.com.cn/ui/js/comm.js"></script>
</head>

<body>
<h1>COMM.JS说明文档</h1>
<h2>timeCountDown</h2>

<p>倒计时插件的使用比较简单,只要建立一个元素div或者span之类，然后把函数绑定在元素上即可。由于插件中已经写好了倒计时部分的html代码，我们在样式中规定好相应class的样式即可（.ct-day、.ct-hour等等）。<br />然后我们要在参数中规定好开始时间和结束时间（{start: new Date("August 8, 2011 23:59:59"),end: new Date("August 12, 2011 23:59:59")}），或者用UTC时间也是可以的（start: 1313064000000,end: 1313071200000）。<br /><br />
在实际应用中，只要确定结束时间即可，现在时间可以用默认的参数，让js取得本地时间，不过在对时间要求非常精确的时候，建议在php里取得服务器时间作为现在时间。如果倒计时的开始时间在现在时间之后，那么就必须在参数里规定开始时间。

</p>
<table  cellpadding="1" cellspacing="1" frame="below">
	<tr>
		<td style="width:10%">参数</td>
		<td style=" width:10%">默认值</td>
		<td>功能</td>
	</tr>
  <tr>
    <td>start</td>
    <td>null</td>
    <td>开始时间</td>
  </tr>
  <tr>
    <td>end</td>
    <td>new Date(Date.UTC(2050, 0, 1))</td>
    <td>结束时间</td>
  </tr>
  <tr>
    <td>now</td>
    <td>new Date().getTime()</td>
    <td>现在时间</td>
  </tr>
  <tr>
    <td>mode</td>
    <td>1</td>
    <td>模式：默认模式1，显示天、小时、分、秒，模式2，显示小时、分、秒，模式3，显示小时、分、秒，其中秒显示为一位浮点小数</td>
  </tr>
  <tr>
    <td>cls</td>
    <td>{day: 'ct-day',hour: 'ct-hour',min: 'ct-min',sec: 'ct-sec',dsec: 'ct-dsec'}</td>
    <td>规定了数字部分的class名</td>
  </tr>
  <tr>
    <td>startHtml</td>
    <td>'尚未开始'</td>
    <td>未开始时显示的文字</td>
  </tr>
  <tr>
    <td>endHtml</td>
    <td>'已结束'</td>
    <td>结束后显示的文字</td>
  </tr>
  <tr>
    <td>padding</td>
    <td>true</td>
    <td>如果这个参数为true，那么数字小于十的时候，则自动补上0，例如03、04</td>
  </tr>
  <tr>
    <td>useHtml</td>
    <td>false</td>
    <td>如果为true，则不显示倒计时时间，只会显示未开始或者已结束。</td>
  </tr>
</table>
<br />
<h2>代码</h2>
<div class="htmlExample">
&lt;span class=&quot;ct-day&quot;&gt;05&lt;/span&gt;天 &lt;span class=&quot;ct-hour&quot;&gt;01&lt;/span&gt;小时 &lt;span class=&quot;ct-min&quot;&gt;09&lt;/span&gt;分 &lt;span class=&quot;ct-sec&quot;&gt;51&lt;/span&gt;秒</div>
<div class="scriptExample">
  &lt;script type=&quot;text/javascript&quot;&gt;<br />
$(&quot;#tcd-example1&quot;).timeCountDown({start: new Date(&quot;August 8, 2011 23:59:59&quot;),end: new Date(&quot;August 12, 2012 23:59:59&quot;)});<br />
&lt;/script&gt; </div>
<h2>例子</h2>
<div id="tcd-example1"></div>
<p>如果想只显示天数，控制一下元素的大小和overflow，把小时、分钟、秒都隐藏即可。</p>
<style type="text/css">
	#tcd-example1{margin-left:10px}
	#tcd-example2{ width:28px; overflow:hidden; height:20px; margin-left:10px}
	#tcd-example2 .ct-hour,#tcd-example2 .ct-min,#tcd-example2 .ct-sec{ display:none}
</style>
<div id="tcd-example2"></div>
<script type="text/javascript">
	$("#tcd-example1").timeCountDown({start: new Date("August 8, 2011 23:59:59"),mode:1,end: new Date("August 12, 2012 23:59:59"),useHtml:false});
	$("#tcd-example2").timeCountDown({start: new Date("August 8, 2011 23:59:59"),end: new Date("August 12, 2012 23:59:59")});
</script>
</body>
</html>
